<script lang="ts" setup>
import TableAction from '#/components/TableAction/index.vue'
import { usePageCURD } from '#/hooks/usePageCURD'
import { usePagePermission } from '#/hooks/usePermission'
import { Page } from '@vben/common-ui'
import { $t } from '@vben/locales'
import { useAsyncState } from '@vueuse/core'
import { Button, InputSearch, Spin } from 'ant-design-vue'
import { ref, watch } from 'vue'
import AddEditModal from './components/AddEditModal.vue'
import SetPermissionModal from './components/SetPermissionModal.vue'
import type { TableListItem } from './use/api'
import { PageApi } from './use/api'
import { PAGE_AUTH_CODE_PREFIX, PAGE_NAME } from './use/config'
import { usePageList } from './use/usePageList'

const { pageList, formValues, getPageList: getPageListOrgin } = usePageList()
const { isLoading, execute: getPageList } = useAsyncState(getPageListOrgin, null)
const isRoleInfoLoading = ref(false)

// 新增、编辑、删除
const {
    FormModal,
    add: handleCreate,
    edit: handleEdit,
    del: handleDelete,
    viewDetail: handleViewDetail
} = usePageCURD<TableListItem>({
    modalOptions: {
        connectedComponent: AddEditModal
    },
    delApi: PageApi.delete
})

// 权限判断
const { getPagePermissionKey, hasPagePermission } = usePagePermission(PAGE_AUTH_CODE_PREFIX)
const currentItem = ref<TableListItem>()

function onClickItem(item: TableListItem) {
    if (isRoleInfoLoading.value) return
    currentItem.value = item
}

watch(pageList, (val) => {
    if (!currentItem.value && val?.length) {
        currentItem.value = val[0]
    }
})

/**
 *  某数据操作
 * @param record
 */
function getActions(record: TableListItem) {
    const arr: any[] = [
        {
            label: $t('common.view'),
            tooltip: $t('common.view'),
            onClick: () => {
                handleViewDetail(record)
            },
            auth: getPagePermissionKey('view')
        },
        {
            label: $t('common.edit'),
            tooltip: $t('common.edit'),
            onClick: () => {
                handleEdit(record)
            },
            auth: getPagePermissionKey('edit')
        },
        {
            label: $t('common.delete'),
            color: '#bb1b1b',
            tooltip: $t('common.delete'),
            popConfirm: {
                title: $t('common.confirmDelete'),
                placement: 'left',
                onConfirm: () => {
                    handleDelete(record)
                }
            },
            auth: getPagePermissionKey('delete')
        }
    ]

    return arr
}

function onLoadingChange(loading: boolean) {
    isRoleInfoLoading.value = loading
}
</script>

<template>
    <Page auto-content-height>
        <div class="flex h-full bg-white p-8">
            <div class="w-200 border-r pr-5">
                <div>
                    <Button
                        v-if="hasPagePermission('add')"
                        @click="handleCreate"
                        style="width: 200px"
                    >
                        {{ $t('common.formModal.addTitle', { title: PAGE_NAME }) }}
                    </Button>
                </div>
                <div class="mt-4">
                    <InputSearch
                        v-model:value="formValues.name"
                        :placeholder="$t('page.system.children.role.children.searchRole')"
                        style="width: 200px"
                    />
                </div>

                <div class="mt-4 w-full">
                    <Spin class="w-full" :tip="`${$t('common.loading')}...`" :spinning="isLoading">
                        <div
                            class="flex items-center p-2 pr-0 hover:cursor-pointer"
                            :class="{ 'bg-gray-100': item.id === currentItem?.id }"
                            v-for="item in pageList"
                            :key="item.id"
                            :title="item.name"
                            @click="onClickItem(item)"
                        >
                            <div class="flex-1 truncate" style="width: 0">
                                {{ item.name }}
                            </div>
                            <div>
                                <TableAction :drop-down-actions="getActions(item)" />
                            </div>
                        </div>
                    </Spin>
                </div>
            </div>
            <div class="flex w-full flex-col pl-5">
                <div v-if="currentItem" class="mb-6">
                    <div class="mb-2 text-lg font-bold">
                        {{ currentItem.name }}
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <span>
                            {{ $t('page.system.children.role.children.form.code') }}:
                            {{ currentItem.code }}
                        </span>

                        <span>{{ $t('common.updateTime') }}：{{ currentItem.updateTime }}</span>
                        <span v-if="currentItem.note">
                            {{ $t('common.remark') }}：{{ currentItem.note }}
                        </span>
                    </div>
                </div>
                <div class="flex-1 overflow-auto">
                    <SetPermissionModal
                        :row-id="currentItem?.id"
                        :disabled="!hasPagePermission('permission')"
                        @loading-change="onLoadingChange"
                    />
                </div>
            </div>
        </div>
        <FormModal @success="getPageList" />
        <PermissionModal @success="getPageList" />
    </Page>
</template>
